<template>
  <div class="consultation-detail-pending">
    <div class="page-header">
      <h2>问诊单详情 - 已确认</h2>
      <p>管理所有已确认的问诊单，正在进行中的问诊</p>
    </div>

    <!-- 搜索区域 -->
    <div class="search-section">
      <div class="search-box">
        <input 
          v-model="searchQuery" 
          type="text" 
          placeholder="搜索问诊单号、患者姓名、医生姓名..."
          @input="handleSearch"
        />
        <button class="search-btn">搜索</button>
      </div>
    </div>

    <!-- 数据表格 -->
    <div class="table-container">
      <table class="data-table">
        <thead>
          <tr>
            <th>问诊单号</th>
            <th>患者姓名</th>
            <th>患者年龄</th>
            <th>医生姓名</th>
            <th>科室</th>
            <th>问诊类型</th>
            <th>预约时间</th>
            <th>症状描述</th>
            <th>费用</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="order in paginatedOrders" :key="order.id">
            <td>{{ order.orderNo }}</td>
            <td>{{ order.patientName }}</td>
            <td>{{ order.patientAge }}岁</td>
            <td>{{ order.doctorName }}</td>
            <td>{{ order.department }}</td>
            <td>
              <span :class="['type-tag', getTypeClass(order.type)]">
                {{ order.type }}
              </span>
            </td>
            <td>{{ order.appointmentTime }}</td>
            <td class="symptoms">{{ order.symptoms }}</td>
            <td>¥{{ order.fee }}</td>
            <td>
              <div class="action-buttons">
                <button 
                  class="action-btn confirm-btn"
                  @click="confirmConsultation(order)"
                >
                  确认问诊
                </button>
                <button 
                  class="action-btn reject-btn"
                  @click="rejectConsultation(order)"
                >
                  拒绝问诊
                </button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <button 
        :disabled="currentPage === 1" 
        @click="currentPage--"
        class="page-btn"
      >
        上一页
      </button>
      
      <span class="page-info">
        第 {{ currentPage }} 页，共 {{ totalPages }} 页
      </span>
      
      <button 
        :disabled="currentPage === totalPages" 
        @click="currentPage++"
        class="page-btn"
      >
        下一页
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

// 响应式数据
const searchQuery = ref('')
const currentPage = ref(1)
const pageSize = ref(10)

// 模拟数据
const orders = ref([
  {
    id: 1,
    orderNo: 'WZ20241201001',
    patientName: '张三',
    patientAge: 28,
    doctorName: '李医生',
    department: '内科',
    type: '图文问诊',
    appointmentTime: '2024-12-01 09:00',
    symptoms: '头痛、发热、咳嗽',
    fee: 50.00
  },
  {
    id: 2,
    orderNo: 'WZ20241201005',
    patientName: '钱七',
    patientAge: 35,
    doctorName: '周医生',
    department: '外科',
    type: '视频问诊',
    appointmentTime: '2024-12-01 18:00',
    symptoms: '腰部疼痛，活动受限',
    fee: 100.00
  },
  {
    id: 3,
    orderNo: 'WZ20241201009',
    patientName: '陈十一',
    patientAge: 42,
    doctorName: '刘医生',
    department: '皮肤科',
    type: '图文问诊',
    appointmentTime: '2024-12-02 14:00',
    symptoms: '皮肤瘙痒，出现红疹',
    fee: 50.00
  },
  {
    id: 4,
    orderNo: 'WZ20241201010',
    patientName: '林十二',
    patientAge: 25,
    doctorName: '黄医生',
    department: '儿科',
    type: '电话问诊',
    appointmentTime: '2024-12-02 16:00',
    symptoms: '孩子发烧，食欲不振',
    fee: 80.00
  },
  {
    id: 5,
    orderNo: 'WZ20241201011',
    patientName: '王十三',
    patientAge: 50,
    doctorName: '赵医生',
    department: '心内科',
    type: '视频问诊',
    appointmentTime: '2024-12-02 19:00',
    symptoms: '胸闷、气短、心悸',
    fee: 100.00
  }
])

// 计算属性
const filteredOrders = computed(() => {
  if (!searchQuery.value) {
    return orders.value
  }
  
  return orders.value.filter(order => 
    order.orderNo.includes(searchQuery.value) ||
    order.patientName.includes(searchQuery.value) ||
    order.doctorName.includes(searchQuery.value) ||
    order.department.includes(searchQuery.value)
  )
})

const paginatedOrders = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredOrders.value.slice(start, end)
})

const totalPages = computed(() => {
  return Math.ceil(filteredOrders.value.length / pageSize.value)
})

// 方法
const handleSearch = () => {
  currentPage.value = 1
}

const getTypeClass = (type: string) => {
  switch (type) {
    case '图文问诊': return 'text'
    case '视频问诊': return 'video'
    case '电话问诊': return 'phone'
    default: return ''
  }
}

const confirmConsultation = (order: any) => {
  // 确认问诊逻辑
  console.log('确认问诊:', order.orderNo)
  alert(`已确认问诊单 ${order.orderNo}`)
  // 这里可以调用API更新状态
}

const rejectConsultation = (order: any) => {
  // 拒绝问诊逻辑
  console.log('拒绝问诊:', order.orderNo)
  alert(`已拒绝问诊单 ${order.orderNo}`)
  // 这里可以调用API更新状态
}

onMounted(() => {
  // 初始化数据
})
</script>

<style scoped>
.consultation-detail-pending {
  padding: 20px;
  min-height: calc(100vh - 120px);
}

.page-header {
  margin-bottom: 30px;
}

.page-header h2 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 24px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.search-section {
  margin-bottom: 20px;
}

.search-box {
  display: flex;
  max-width: 400px;
}

.search-box input {
  flex: 1;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 6px 0 0 6px;
  font-size: 14px;
  outline: none;
}

.search-box input:focus {
  border-color: #1890ff;
}

.search-btn {
  padding: 10px 20px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  font-size: 14px;
}

.search-btn:hover {
  background: #40a9ff;
}

.table-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-bottom: 20px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}

.data-table th {
  background: #fafafa;
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

.data-table td {
  font-size: 14px;
  color: #333;
}

.data-table tbody tr:hover {
  background: #f5f5f5;
}

.symptoms {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.type-tag {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.type-tag.text {
  background: #f0f5ff;
  color: #1890ff;
}

.type-tag.video {
  background: #fff0f6;
  color: #eb2f96;
}

.type-tag.phone {
  background: #f6ffed;
  color: #52c41a;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.action-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s;
}

.confirm-btn {
  background: #52c41a;
  color: white;
}

.confirm-btn:hover {
  background: #73d13d;
}

.reject-btn {
  background: #ff4d4f;
  color: white;
}

.reject-btn:hover {
  background: #ff7875;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.page-btn {
  padding: 8px 16px;
  border: 1px solid #d9d9d9;
  background: white;
  color: #666;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.page-btn:hover:not(:disabled) {
  border-color: #1890ff;
  color: #1890ff;
}

.page-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.page-info {
  font-size: 14px;
  color: #666;
}

@media (max-width: 768px) {
  .search-box {
    max-width: none;
  }
  
  .data-table {
    font-size: 12px;
  }
  
  .data-table th,
  .data-table td {
    padding: 8px 10px;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 4px;
  }
}
</style> 